<template>
  <div>
    <h2>{{ sum }}</h2>
    <h2 v-text="sum"></h2>
    <h2 v-big="sum"></h2>
    <h2 v-beauty="sum"></h2>
  </div>
</template>

<script>
  export default {
    name:'App',
    data() {
      return {
        sum:'你好'
      }
    },
    directives:{
      // 1.big函数何时调用？—— 有人使用v-big指令时，用几次调几次
      // 2.big函数中的this是谁？ —— 爱谁谁，反正不是vc或vm
      // 3.big函数接收哪些参数？ —— element(指令所在元素)、
      // 4.big函数是否需要写返回值？—— 不需要返回值
      big(element,{value}){
        element.innerText = value * 10
      },
      beauty(element,{value}){
        element.innerText = value
        element.style.color = 'red'
        element.style.backgroundColor = 'yellow'
        element.style.boxShadow = '0 0 10px'
      }
    }
  }
</script>